<template>
  <view class="top-tips" v-show="visible">
    <image class="del-icon" src="/static/NoticeDissmissDark.png" @click="closeTips"></image>
    <view class="content-box">
      <view class="tips-content">
        <text>{{ tipsContent }}</text>
        <text v-if="showCheck">，</text>
      </view>
      <view v-if="showCheck" class="check-content" @click="checkDetail">
        <text>查看如何解决</text>
        <image :src="'/static/NoticeMoreDark.png'"></image>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
const props = defineProps<{
  visible: boolean
  tipsContent: string
  showCheck?: boolean
}>()

const emit = defineEmits<{
  (e: 'update:visible', visible: boolean): void
  (e: 'check'): void
}>()

/**
 * 关闭弹框
 */
function closeTips() {
  emit('update:visible', false)
}

/**
 * 查看如何解决
 */
function checkDetail() {
  emit('check')
}
</script>
<style lang="less">
.top-tips {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 20rpx 0rpx;
  text-align: center;
  background-color: #ffcc66;
  transition: all 0.4s ease-in-out 3s;
  opacity: 0.8;
  display: flex;
  align-items: center;
}
.del-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 16rpx;
  margin-left: 24rpx;
}
.content-box {
  width: calc(100% - 52rpx);
  display: flex;
  align-items: center;
  margin-right: 24rpx;
}
.tips-content {
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 32rpx;
  line-height: 40rpx;
  color: var(--dark-color);
  text-align: left;
}
.check-content {
  text-decoration: underline;
  image {
    width: 28rpx;
    height: 24rpx;
    margin-left: 8rpx;
  }
}
</style>
